<template>
  <div class="login">
    <div class="login-main flex-main">
      <h3>欢迎登录</h3>
      <bForm :instance="pLogin" cover="100%" :mini="true"></bForm>
      <div class="row-center">
        <el-button type="primary" style="width: 90%" @click="() => pLogin.onLogin()">登录</el-button>
        <el-button style="width: 90%" @click="dForm._show = true">注册</el-button>
      </div>
    </div>
  </div>
  <!-- 注册 -->
  <el-dialog v-model="dForm._show" :title="dForm.title" width="60%">
    <bForm :data="dForm.data" :instance="dForm" label_width="5em" cover="100%">
      <el-button @click="onUpdate">完成</el-button>
    </bForm>
  </el-dialog>
  <bCropper v-model:img="tempImg"></bCropper>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { Login } from "../../model/login/login";
import bCropper from "@/components/User/b_cropper.vue";
import bForm from "@/components/public/b_form.vue";
import { UserSelfForm } from "@b/index/account";
import { ElButton, ElDialog } from "element-plus";

const pLogin = new Login();
const tempImg = ref();
const dForm = new UserSelfForm();


dForm.title = "注册账号";
dForm.url.add = "/v1/user/register_self";

pLogin.init()

dForm.showCroppe = (url: string) => {
  tempImg.value = url;
};
watch(tempImg, (url) => {
  dForm.data.headImg = url;
});
const onUpdate = async () => {
  const res = await dForm.updateData();
  if (res) {
    dForm._show = false;
  }
};
</script>

<style scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 600px;
  height: calc(100vh - 150px);
  background-size: cover;
}

.login .login-main {
  width: 28vw;
  min-width: 400px;
  background-color: var(--el-bg-color);
}

.login-main>div>img {
  width: 100%;
  height: 100%;
}

.el-input img {
  margin-right: 16px;
  height: 54%;
}

.flex-main {
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--el-border-color);
}

.el-checkbox {
  --el-checkbox-input-width: 1em;
  --el-checkbox-input-height: 1em;
  --el-checkbox-font-size: 1em;
}
</style>
